<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1.事件的基本使用</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>欢迎来到{{name}}这边学习</h2>
        <button v-on:click="showInfo1">点我提示信息(不传参)</button>
        <button @click="showInfo2($event,66)">点我提示信息(传参)</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: '卜俊杰'
                }
            },
            methods: {
                showInfo1(event) {
                    console.log(event.target);
                    alert('给小小的我弹出信息');
                },
                /*  箭头是 window 实例 */
                // showInfo: (event) => {
                //     console.log(event.target);
                //     alert('给老子弹出信息');
                // }
                showInfo2(event, number) {
                    console.log(number, event.target);
                    alert('给老子弹出信息');
                }
            }
        });
        console.log('vue实例', vm);

    </script>

</body>

</html>